<!-- 用户模块 -->
<template>
	<!-- 我的记录 -->
	<view class="record">
		<view class="item" @click="navToCheckLogin('/subpages/user-consumer/task-list/task-list')">
			<icon class="iconfont icon">&#xe810;</icon>
			<text>悬赏列表</text>
		</view>
		<view class="item" @click="navToCheckLogin('/subpages/user-consumer/record/record')">
			<icon class="iconfont icon">&#xe811;</icon>
			<text>最近浏览</text>
		</view>
	</view>
	<!-- 推荐大牛 -->
	<view class="recommoned">
		<skeleton :loading="loading" :skeleton="['mine_recommoned']"></skeleton>
		<template v-if="!loading">
			<view class="hd">
				<text>{{recommoned.title}}</text>
			</view>
			<view class="bd">
				<template v-for="(item,index) in recommoned.list" :key="index">
					<navigator :url="`/subpages/space/space?mid=${item.mid}`" class="item" v-if="index<2" :hover-stop-propagation="true">
						<view class="avatar">
							<lazy-load-image class="img" :image="item.img" :errorImg="config.errorImage.avator" imgMode='aspectFill' height="86rpx" borderRadius="43" />
							<icon :class="['iconfont icon','icon-auth-'+item.auth]">&#xe796;</icon>
						</view>
						<view class="info">
							<view class="name">
								<text class="nickname">{{item.nickname}}</text>
								<text :class="['state',{'state-rest':!item.is_working}]">{{item.is_working?'服务中':'休息中'}}</text>
							</view>
							<view class="desc">
								<text>{{item.introduce}}</text>
							</view>
						</view>
					</navigator>
				</template>
			</view>
			<view class="ft" @click="more()">
				<text>{{recommoned.more}}</text>
			</view>
		</template>
	</view>
</template>
<script setup>
	import config from '@/uni.config.js';
	const emits = defineEmits(['navToCheckLogin']);
	defineProps({
		loading: {
			type: Boolean,
			default: false
		},
		recommoned: Object
	})
	// 更多大牛
	function more() {
		uni.$emit('moreDaniel', 0);
		uni.switchTab({
			url: '/pages/find/find'
		})
	}
	// 登录跳转
	function navToCheckLogin(url) {
		emits('navToCheckLogin', url);
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	$w:694rpx;
	@mixin common {
		width: $w;
		margin: 0 auto 28rpx;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .08);
		border-radius: 18rpx;
		background-color: #fff;
	}
	.record {
		@include common;
		@include flex;
		height: 130rpx;
		margin-top: -80rpx;
		padding: 30rpx 0;
		.item {
			@include flex;
			height: 100%;
			justify-content: center;
			flex-basis: 50%;
			border-right: 1px solid #ddd;
			&:last-child {
				border-right: 0;
			}
			.icon {
				margin: 6rpx 16rpx 0 0;
				font-size: 40rpx;
				color: #333;
			}
			text {
				font-size: 32rpx;
				color: #333;
			}
		}
	}
	.recommoned {
		@include common;
		padding: 30rpx 28rpx;
		.item {
			@include flex;
			padding: 34rpx 0;
			border-bottom: 1px solid #ddd;
			&:last-child {
				border-bottom: 0;
				padding-bottom: 0;
			}
			.avatar {
				position: relative;
				width: 86rpx;
				height: 86rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				.icon {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 30rpx;
					height: 30rpx;
					justify-content: center;
					border-radius: 50%;
					font-size: 20rpx;
					color: #fff;
				}
				.icon-auth {
					&-1 {
						background-color: #faad14;
					}
					&-2 {
						background-color: #ff4d00;
					}
				}
			}
			.info {
				flex: 1;
				margin-left: 20rpx;
				.name {
					@include flex(row, flex-start);
					margin-bottom: 8rpx;
					.nickname {
						max-width: 400rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						font-weight: 700;
						font-size: 34rpx;
						color: #000;
					}
					.state {
						margin-left: 10rpx;
						padding: 6rpx 15rpx;
						border-radius: 6rpx;
						background-color: #F2F5F9;
						font-size: 24rpx;
						color: $color;
						&-rest {
							color: #aaa;
						}
					}
				}
				.desc {
					max-width: 500rpx;
					height: 32rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					font-size: 24rpx;
					color: #666;
				}
			}
		}
		.ft {
			padding: 34rpx 0 0;
			text-align: center;
			font-size: 30rpx;
			color: #aaa;
		}
	}
</style>
